<template>
  <div class="main">
    <div class="logoutCenterWrap">
      <go-back aa="../user" :white="true"></go-back>
      <!-- <div class="graybar"></div> -->
      <div class="thirdBar">
        <!-- <span class="flex-h thirdsp" style="position: relative;">
          <a
            style="position: absolute;width: 100%;height: 100%;opacity: 0;"
            href="tel://(027)88161985"
          >拨打电话</a>
          <b class="b1 flex1">联系客服</b>

  
        </span>-->
        <span class="flex-h thirdsp bordernone" @click="commonJs.gopush('../login/forget')">
          <b class="b1 flex1">修改密码</b>
          <i class="imgIcon"></i>
        </span>
 
      </div>
      <div class="graybar"></div>

      <div class="thirdBar">
        <span class="flex-h title">
          <b class="b1 flex1">社交账号绑定</b>
        </span>
        <span class="flex-h thirdsp bordernone" @click="getBind">
          <img class="wchat" src="~@/static/images/me_icon_wechat.png" alt=""><b class="b1 flex1">微信</b>
          <b class="flex1 b2">
            <i :class="isBind==1?'ii1':''">{{isBind==1?'已绑定':'未绑定'}}</i>
          </b>
  
        </span>
      </div>
      <div class="graybar"></div>
      <div class="logoutbtn" @click="logout">退出登录</div>
    
    </div>
      <comfirBox :showComfirm="showComfirm" confirBtnTxt="确定" @onCancel="showComfirm=false" @onConfirm="clearBind">
        <div>
          <h2 style='text-align:center;color:#80D566'>提示</h2><p style='text-align:center;display:block;margin-top:0.2rem'>确定解除绑定?</p>
        </div>
      </comfirBox> 
  </div>
</template>
<script>
import goBack from "~/components/goBack";
import { userUnbind, userBinding, isWxBind } from "~/api/identity";

import comfirBox from '~/components/comfirBox'
import { logout } from "~/api/mall";
import ls from "store2"; 
export default {
  head: {
    title: "升学在线"
  },
  components: {
    goBack,
    comfirBox
  },
  created() {
    // this.commonJs.gopush('../user')
    // this.isBind = ls.get('yxkData').isBinding;
  },
  data() {
    return {
      showComfirm:false,
      bind: false,
      isBind: null,
      codes: null
    };
  },
  watch: {},
  mounted: function() {
    // this.isBind = ls.get("yxkData").isBinding;
    this.$visit("Settings")
    this.isWxBind()
  },

  methods: {
    isWxBind(){
      let obj={
        uid:ls.get("yxkData").userVoId
      }
      isWxBind(obj).then(res=>{
        if(res.code=='0'){
          this.isBind = res.data.isBinding
        }

      }).finally(()=>{

      })
    },
    clearBind() {
      userUnbind({ uid: ls.get("yxkData").userVoId })
        .then(res => {
          if (res.code == 0) {
            this.$vux.toast.text(res.message);
            this.isBind = 0;
            let yxkdata = ls.get("yxkData");
            yxkdata.isBinding = 0;
            ls.set("yxkData", yxkdata);
          }
          this.showComfirm=false;
        })
        .catch(error => {
          this.$vux.toast.text(error);
        });
    },

    getBind() {
      // this.isBind = ls.get("yxkData").isBinding;
      if (this.isBind == 0) {
        this.userBind(ls.get("wxuniond"));
      } else {    
        this.showComfirm=true;   
      }
    },
    userBind(unionds) {
      //绑定uid和unionid
      let obj = {
        uid: ls.get("yxkData").userVoId,
        unionId: unionds,
        userType: ls.get("yxkData").userType
      };
      userBinding(obj)
        .then(res => {
          if (res.code == 0) {
            this.bind = true;
            this.isBind = 1;
            let yxkdata = ls.get("yxkData");
            yxkdata.isBinding = 1;
            ls.set("yxkData", yxkdata);
            this.$vux.toast.text(res.message);
          } else {
            this.$vux.toast.text(res.data.message);
          }
        })
        .catch(err => {
          this.$vux.toast.text(err.message);
        });
    },

    logout() {
      this.openid = ls.get("wxopen_id");
      this.wxuniond = ls.get("wxuniond");
      this.$vux.confirm.show({
        // 组件除show外的属性
        content: "您确定要退出【升学在线】吗？",
        onCancel: () => {},
        onConfirm: () => {
          this.logoutMall();
        }
      });
    },
    logoutMall() {
      logout({
        sx_uid: ls.get("yxkData").userVoId
      })
        .then(res => {
          if (res.code == "200") {
            localStorage.clear();
            ls.clear();
            sessionStorage.clear();
            ls.set("wxopen_id", this.openid);
            ls.set("wxuniond", this.wxuniond);
            this.commonJs.gopush("../user");
          }
        })
        .catch(() => {});
    }
  },
  beforeDestroy() {}
};
</script>

<style scoped lang="less">
/deep/.vux-confirm .vux-x-dialog .weui-dialog .weui-dialog .weui-dialog__bd:first-child{
  padding: 0.3rem 0 0.2rem !important;
}
/deep/.weui-dialog__ft{
  height: 0.8rem;
  line-height: 0.8rem;
  .weui-dialog__btn_primary{
    color: @mainColor
  }
}
.logoutCenterWrap {
  width: 7.5rem;
  min-height: 100vh;
  height: auto;
  background: rgba(247, 247, 250, 1);

  .graybar {
    // margin-top: 0.3rem;
    width: 100%;
    height: 0.24rem;
    background: rgba(247, 247, 250, 1);
  }

  .thirdBar {
    height: auto;
    width: 100%;
    padding: 0 0.3rem;
    box-sizing: border-box;
    background: #fff;

    .thirdsp {
      width: 100%;
      height: 1.1rem;

      border-bottom: 0.01rem solid rgba(216, 216, 216, 1);

      .b1 {
        font-size: 0.28rem;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
      }
      .imgIcon{
         	display: inline-block;
					width: 0.4rem;
					height: 0.4rem;
					background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -1.3rem;
          background-size:3rem 2.4rem;
      }
      img {
        width: 0.4rem;
        height: 0.4rem;
      }

      .b2 {
        text-align: right;

        i {
          display: inline-block;
          width: 1rem;
          height: 0.5rem;
          // border: 1px solid @mainColor;
          font-size: 0.26rem;
          // color: @mainColor;
          text-align: center;
          line-height: 0.5rem;
          //  border: 1px solid #888;
          color: #999999;
        }

        .ii1 {
          // border: 1px solid ##999999;
          color: #999999;
        }
      }
    }
    .title{
      height: 0.88rem;
      line-height: 0.88rem;
      border-bottom: 0.01rem solid rgba(216, 216, 216, 1);
      b{
         font-size:0.22rem;
      font-weight:400;
      color:rgba(153,153,153,1);
      }
     

    }
    .wchat{
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.2rem;
    }
    .bordernone {
      border-bottom: none;
    }
  }

  .logoutbtn {
    width: 100%;
    height: 0.8rem;
    text-align: center;
    font-size: 0.3rem;
    color: @mainColor;
    line-height: 0.8rem;
    background: #fff;
  }
}
</style>
